<#include "../../common/header.htm">
<div class="content-wrapper" style="height:100%;padding:0 10px;">
    <section class="content" style="height:100%;">
        <div id="inAccount" style="background:#fff;height:100%;display:flex;flex-direction: column;"  >
            <div class="stream_search" style="height:40px;" >
                <div class="importti">
                    <span class="importfont"><span class="sming"></span><span class="smtit">说明：主要用于分析机主在某个通话时间段都产生了哪些资金交易。</span></span>
                </div>
                <el-form id="listForm" :inline="true"  :model="form" class="demo-form-inline">
                    <el-form-item class="form_z" label="通话时间">
                        <el-date-picker
                                v-model="form.beginTime"
                                name="beginTime"
                                type="date"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="el-form-item refsh" label="至">
                        <el-date-picker
                                v-model="form.endTime"
                                name="endTime"
                                type="date"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间间隔">
                        <el-input v-model="form.time_interval" name="time_interval" placeholder=""></el-input><span style="position: relative;top: -35px;left: 124px;">小时</span>
                    </el-form-item>
                    <div class="zcdcon">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">分析</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button  @click="clear()">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="daobtn" @click="exportExcel" >导出</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div style="margin-top: 100px;">
                <div id="dg"></div>
            </div>
        </div>
    </section>
</div>
<script>
    var caseId=parent.caseId;
    $(function () {
        _checkedCallback();
    })
    $('.el-tabs__content').height=($(window).height())-50;
    let vm=new Vue({
        el:"#inAccount",
        data:{
            form: {
                beginTime: '',
                endTime: '',
                time_interval:48
            }
        },
        methods: {
            onSubmit() {
                _checkedCallback();
            },
            clear(){
                this.form.beginTime=''
                this.form.endTime=''
                this.form.time_interval=''
            },
            exportExcel(){
                var xhr = new XMLHttpRequest();
                var url="${ctx}/phone/multipleData/down_phoneToBill";
                xhr.open('POST', url, true);
                xhr.responseType = "blob";  // 返回类型blob
                // 定义请求完成的处理函数
                xhr.onload = function () {
                    // 请求完成
                    if (this.status === 200) {
                        var content = this.response;
                        var aTag = document.createElement('a');
                        var blob = new Blob([content]);
                        var headerName = xhr.getResponseHeader("Content-disposition");
                        var fileName = decodeURIComponent(headerName).substring(21);
                        aTag.download = fileName;
                        aTag.href = URL.createObjectURL(blob);
                        aTag.click();
                        URL.revokeObjectURL(blob);
                    }
                };
                // 发送ajax请求
                var checkedAccount = parent.parent._checkedPhone;
                var serviceNumber = checkedAccount[0];

                var formdata=new FormData();
                formdata.append("serviceNumber",serviceNumber);
                formdata.append("beginTime",getMyDate(vm.form.beginTime));
                formdata.append("endTime",getMyDate(vm.form.endTime));
                formdata.append("casemanageId",caseId);
                formdata.append("time_interval",vm.form.time_interval);
                xhr.send(formdata);
            },
        }
    });
    function check() {
        var checkedAccount = parent.parent._checkedPhone;
        if( !checkedAccount || !checkedAccount.length == 1){
            toastr.success("请选择一个主体卡号");
            return false;
        }
        if (!vm.form.beginTime) {
            toastr.info("请选择开始时间");
            return false;
        }
        if (!vm.form.endTime) {
            toastr.info("请选择结束时间");
            return false;
        }
        if (!vm.form.time_interval) {
            toastr.info("请选择间隔时间");
            return false;
        }
        return true;
    }
    function _checkedCallback() {
        var flag=check();
        if (!flag){
            dg(null,null)
            return false;
        }
        var checkedAccount = parent.parent._checkedPhone;
        //左侧树选中的电话号码
        var serviceNumber = checkedAccount[0];
        dg(serviceNumber)
    }
    function dg(serviceNumber) {
        $('#dg').datagrid({
            method : 'post', // 服务器数据的请求方式 get or post
            url:"${ctx}/phone/multipleData/phoneToBill",//请求数据url
            queryParams : {
                serviceNumber:serviceNumber,
                beginTime : getMyDate(vm.form.beginTime),
                endTime: getMyDate(vm.form.endTime),
                casemanageId:caseId,
                time_interval:vm.form.time_interval
            },
            height:($(window).height())-($('.stream_search').outerHeight(true))-100,
            rownumbers: true,//行号
            singleSelect: true,//只选择一行
            checkOnSelect: true,
            autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            columns: [[
                {
                    field: 'service_number',//域值
                    title: '主叫号码',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                },
                {
                    field: 'service_user_information',//域值
                    title: '机主户名',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                },
                {
                    field: 'party_number',//域值
                    title: '对方号码',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                },
                {
                    field: 'party_user_information',//域值
                    title: '对方户名',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                },
                {
                    field: 'starting_time',//域值
                    title: '通信时间',//内容
                    visible: true,//false表示不显示
                    sortable: true,
                    width : '10%'
                },
                {
                    field: 'talk_time',//域值
                    title: '通信时长',//内容
                    visible: true,//false表示不显示
                    sortable: true,
                    width : '10%'
                },
                {
                    field: 'count',//域值
                    title: '交易次数',//内容
                    visible: true,//false表示不显示
                    sortable: true,
                    width : '10%',
                    formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                        let service_user_information=row.service_user_information?row.service_user_information:'';
                        let id_number=row.id_number?row.id_number:'';
                        let min_time=row.min_time?row.min_time:'';
                        let max_time=row.max_time?row.max_time:'';
                        let count=row.count?row.count:'';
                        return "<a href='#' onclick='openDialog(\""+service_user_information+"\",\""+id_number+"\",\""+min_time+"\",\""+max_time+"\")'>"+count+"</a>";
                    }
                },
                {
                    field: 'in_money',//域值
                    title: '流入金额',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                },
                {
                    field: 'out_money',//域值
                    title: '流出金额',//内容
                    visible: true,//false表示不显示
                    width : '10%'
                }
            ]],
            onLoadSuccess: function (result) {

            },
        });
    }
    function openDialog(account_body,id_number,min_time,max_time) {
        var param = {
            serviceUserInformation:account_body,
            idNumber:id_number,
            ct_beginTime:min_time,
            ct_endTime : max_time,
            caseId:caseId
        }
        var d = top.dialog({
            title : '资金交易时的通话分析详情',
            modal : true,
            url : '${ctx}/phone/multipleData/phoneToBillDetailInit',
            height : 850,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
</script>

<style>
    .el-tabs__item.is-active {
        color: #287CDF;
    }
    .el-tabs__active-bar{
        background-color: #287CDF;
        height: 2px;
    }
    .el-tabs__header{
        margin: 0px 0 7px!important;
        width: 100%;
        z-index: 2;
        background: #fff;
        position: fixed;
    }
    .svzjRight {
        margin-top: -30px;
    }
    .stream_body::-webkit-scrollbar {/*滚动条整体样式*/
        height: 6px;
    }
    .loadimgbtn{
        background: url(${ctx}/imgs/login-imgs/loadimg.png);
        display: inline-block;
        width: 14px;
        height: 16px;
        position: absolute;
        right: 35px;
        cursor: pointer;
    }
    .loadimgbtn:hover{
        background: url(${ctx}/imgs/login-imgs/loadimgh.png);
        display: inline-block;
        width: 14px;
        height: 16px;
        position: absolute;
        right: 35px;
    }
    .svzjRight{
        overflow-y: auto;
    }
    .refshj .el-form-item__label {
        margin-left: -16px;
        margin-right: -8px;
    }
    .svzjFontCon {
        text-align: center;
        padding-top: 60px;
    }
    span.zcline {
        display: inline-block;
        width: 20px;
        height: 2px;
        background-color: #3b9ef3;
        border-radius: 1px;
        vertical-align: super;
        margin-right: 5px;
    }
    span.hlline{
        display: inline-block;
        width: 20px;
        height: 2px;
        background-color: #e6965c;
        border-radius: 1px;
        vertical-align: super;
        margin-right: 5px;
    }
    span.zcfont {
        margin-right: 10px;
    }
    .svzjLeft{
        float: left;
    }
    .svzjRen {
        text-align: center;
        padding-top: 34px;
    }
    .svzjimg {
        width: 12px;
        height: 15px;
        background: url("../../../imgs/svzjimg.png") no-repeat;
        margin-left: 47px;
    }
    .svzjCircle {
        width: 8px;
        height: 8px;
        background-color: #eef1f9;
        margin-top: 69px;
        border-radius: 50%;
    }
    .el-table__header,
    .el-table__body{
        width: 100%!important;
    }
    .account_treeview_buttonarea{
        margin-top: 40px;
    }
    .el-form-item.form_z {
        margin-right: 11px !important;
    }
    .zcdcon {
        display: inline-block;
    }
    .robot-table {
        padding: 0 10px;
    }
    .el-pagination {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .stream_search {
        position: fixed;
        background: #fff;
        width: 100%;
        padding-top: 10px;
    }
    .el-form-item__label{
        color: #6f7689;
        font-weight: 400;
        font-size: 13px;
    }
    .el-form--inline .el-form-item{
        margin-right: 18px;
    }
    .casemanage-switch .casemanage-zhexiantu.active {
        background-color: #4595ec;
    }
    .casemanage-switch .casemanage-zhexiantu {
        float: left;
        width: 50px;
        height: 35px;
        display: block;
        cursor: pointer;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        line-height: 35px;
        text-align: center;
    }
    #font_zhexian{
        color: #C1C2C3;
        font-size: 18px;
    }
    #font_zhexian.active{
        color: #F4F9FE;
    }
    .el-input__inner{
        border-color: #D2D6DE;
        height: 34px;
        width: 179px;
        font-size: 12px;
        border-color: #e4e4e4;
    }
    .el-input__inner:hover{
        border-color:#4695ed;
    }
    .el-input__inner:focus{
        border-color:#4695ed;
    }
    .el-dialog--small{
        width: 88%;
    }
    .el-button--primary{
        background-color:#4695ed;
        border-color:#4695ed;
        width: 70px;
    }
    .el-button--primary:focus, .el-button--primary:hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    button.el-button.el-button--default.reset_button {
        background-color: #f4f4f4;
        color: #444;
        border-color: #ddd;
    }
    .button.el-button.el-button--default.reset_button:focus, button.el-button.el-button--default.reset_button:hover{
        border-color: #adadad;
        background-color: #e7e7e7;
    }
    .el-button{
        width: 70px;
    }
    .el-breadcrumb{
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 17px;
    }



    /*--------------------------------时间轴--------------------------------*/
    .timeline-account {
        width: 158px;
        white-space: pre-wrap;
        word-break: break-all;
        word-wrap: break-word;
    }
    .timeline-body{
        width: 90%;
        overflow: hidden;
    }
    .timeline-content{
        position: relative;
        overflow: hidden;
        margin-bottom: -140px;
        margin-right: 80px;
    }
    .timeline-ul{
        width:auto;
        display: block;
        height:120px;
        white-space: nowrap;
    }
    .timeline-ul li{
        list-style: none;
        width: 70px;
        height:200px;
        margin-left: -5px;
        display: inline-block;
        position: relative;
        background: url('/imgs/timeline.png') repeat-x center;
        background-size: 3px;
        white-space: nowrap;
    }
    .timeline-month span{
        position: absolute;
        left: 20px;
        top: 93px;
    }
    .timeline-month span.current{
        color:green;
    }
    .timeline-month span:before{
        content: " ";
        display: block;
        height: 13px;
        width: 13px;
        background: url("${ctx}/timelineIcons/timeline-pointMonth.png") no-repeat;
        background-size: 100%;
    }
    .timeline-day{
        cursor: pointer;
    }
    .timeline-day span{
        position: absolute;
        left: -17px;
        transform: rotate(302deg);
        top: -5px;
        width: 200px;
    }
    .timeline-day span:hover{
        color:#42CD12;
    }
    .timeline-day span:before{
        content: " ";
        display: block;
        height: 10px;
        width: 10px;
        background: url(/imgs/timeline-point.png) no-repeat;
        background-size: 100%;
        position: absolute;
        left: -16px;
        top: 7px;
    }
    .timeline-monthText{
        margin-left: -23px;
    }
    .timeline-day.current span{
        color:#42CD12;
    }
    .timeline-day.current span:before{
        background: url(/imgs/timeline-point-small.png) no-repeat;
    }
    .timeline-all{
        float: left;
        margin-top: 75px;
        margin-right: 2%;
        margin-left: 5%;
    }
    .timeline-arrow-left,
    .timeline-arrow-right{
        width: 45px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        cursor: pointer;
    }
    .timeline-arrow-left{
        float: left;
        margin-top: 75px;
        background: url("${ctx}/timelineIcons/left-arrow.png");

    }
    .timeline-arrow-right{
        float: right;
        margin-top: 76px;
        background: url("${ctx}/timelineIcons/right-arrow.png");
    }
    .timeline-arrowLeft{
        font-size: 32px;
        color: #ccc;
    }

    .timeline-active{
        background: url('/imgs/timeline-c.png') repeat-x center;
    }
    .timelineActive{
        background: url('/imgs/timeline-c.png') repeat-x center !important;
    }
    .timelinegray{
        background: url('timelineIcons/timeline-c.png') repeat-x center !important;
    }
    .timelinegray-sp{
        color: #D7D4D4;
    }
    .timeline-day .timelinegray span:before{
        background: url("timelineIcons/timeline-samllc.png") no-repeat;
    }
</style>
